Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
- let d = .006; svg(width='0' height='0') filter#layers(color-interpolation-filters='sRGB' primitiveUnits='objectBoundingBox' x='0' y='0' width='100%' height='100%') feColorMatrix(values=`0 0 0 0 .1 0 0 0 0 .26 0 0 0 0 .41 1 1 1 0 -1` result='face') feColorMatrix(in='SourceGraphic' values=`0 0 0 0 .94 0 0 0 0 .235 0 0 0 0 .38 0 1 1 0 -1`) feOffset(dx=-d dy=2*d) feBlend(in='face' mode='multiply') div(contenteditable='true') i don't wanna grow up
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } html, body { display: grid } html { height: 100% } svg[width='0'][height='0'] { position: fixed } div { --u: sqrt(2)*1px; place-self: center; position: relative; color: #00f; font: 900 min(32vh, 20vw)/ 1 monospace; overflow-wrap: anywhere; text-transform: uppercase; text-wrap: balance; isolation: isolate; filter: url(#layers); /* due to rendering + Firefox bug */ &::after { position: absolute; inset: 0; padding: inherit; background: linear-gradient(90deg, #0000 50%, #0f0 0) 0/ 1ch content-box, repeating-linear-gradient(45deg, #f00 0 calc(var(--u)), #000 0 calc(2.5*var(--u))); mix-blend-mode: screen; pointer-events: none; content: '' } }
console.log("Event Fired")